<template>
  <h2>计算属性</h2>
  模板语法1：{{firstname+'.'+lastname}}<br>
  模板语法2：{{firstname}}.{{lastname}}<br>
  firstname: <input type="text" v-model="firstname"><br>
  lastname: <input type="text" v-model="lastname"><br>
  计算属性：{{fullname}}
  成绩： <input type="text" v-model="score"><br/>
  {{score}}{{show}}
</template>

<script>
import {computed, reactive, toRefs} from "vue";

export default {
  name: "Computed",
  setup(){
    const user = reactive({
      firstname : 'yuanxi',
      lastname : 'com',
      score:60
    });
    const fullname = computed(()=>{
      return user.firstname + '.' + user.lastname;
    });
    const show = computed(()=>{
      if(user.score < 60)
          return '不及格'
      else if(user.score >= 60 && user.score < 70)
          return '勉强'
      else if(user.score >= 70 && user.score <= 90)
        return '优秀'
      else if(user.score > 90 && user.score <= 100)
        return '棒棒的！'
      else
        return '作假都不会！'
    })
    return{
      ...toRefs(user),
      fullname,
      show
    }
  }
}
</script>

<style scoped>

</style>